<template>
	<view class="page">
   <!-- header 开始 -->
   		<view class="header">
   			<!-- 搜索框开始 -->
   			<view class="uni-search-bar">
   				<uni-search-bar placeholder="请输入关键字进行查找" cancel-button="none" radius="100"/>
   			</view>
   			<!-- 搜索框结束 -->
   		</view>
   		<!-- header 结束 -->
		<!-- 首页分类开始 -->
				<view class="classify_wrap">
					<!-- 横向分类滚动开始 -->
				  <view class="classify_scroll_x">
				    <scroll-view scroll-x="true" >
				      <view class="segmented-wrap">
				        <uni-segmented-control :current="current" :values="classify" @clickItem="onClickItem" styleType="text" activeColor="#CC0000"></uni-segmented-control>
				      </view>
				    </scroll-view>
				  </view>
				  <!-- 横向分类滚动结束 -->
				  			<!-- 分类 icon 开始 -->
				  			<view class="classify_icon">
				  				<uni-icons type="list" size="28" color="gray"></uni-icons>
				  			</view>
				  			<!-- 分类 icon 结束 -->
				  		</view>
				  		<!-- 首页分类结束 -->
		
    <!-- 首页轮播图开始 -->
		<view class="uni-margin-wrap">
			<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner">
				<view v-if="error">{{error.message}}</view>
				<view v-else>
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<swiper-item v-for="(item, index) in data" :key="item._id">
							<view class="swiper-item">
								<image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="false" />
							</view>
						</swiper-item>
					</swiper>
				</view>
			</unicloud-db>
		</view>
  	<!-- 首页轮播图结束 -->
			<view class="content">
				<view v-if="current === 0">
					<!-- 会员权益开始 -->
									<view class="vip-wrap">
										<uni-card title="会员权益" :thumbnail="vipIcon" margin="5px">
											<uni-grid :column="column" :show-border="false" :square="false">
												<uni-grid-item v-for="(item, index) in vipItem">
													<view class="grid-item-box">
														<image :src="item.icon" style="width: 60rpx; height: 60rpx;" mode="aspectFill"></image>
														<text>{{ item.text }}</text>
													</view>
												</uni-grid-item>
											</uni-grid>
										</uni-card>
									</view>
									<!-- 会员权益结束 -->
				</view>
				<view v-if="current === 1">
					选项卡2的内容
				</view>
				<view v-if="current === 2">
					选项卡3的内容
				</view>
			</view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				classify:["主页","儿童","教辅","文学社科","艺术","经管励志","考试法律","科技生活","文创"],
				current: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				column: 3,
								vipIcon: '/static/vip/vipIcon.png',
								vipItem: [
									{text: '购买储值卡', icon: '/static/vip/chuzhika.png'},
									{text: '会员签到', icon: '/static/vip/qiandao.png'},
									{text: '领券中心', icon: '/static/vip/lingquan.png'}
								],
			}
		},
		methods: {
						onClickItem(e) {
							if (this.current !== e.currentIndex) {
								this.current = e.currentIndex
							}
						},
						goToGrid(){
										uni.switchTab({
											url:'/pages/grid/grid'
										})
									},
			
		}
	}
</script>

<style scoped>
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
	
	.pages {
			background-color: #EEEEEE;
	}
	
	.header{
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
	}
	
	.classify_wrap {
			width: 750rpx;
			display: flex;
			flex-direction: row;
		}
		.classify_scroll_x{
			white-space: nowrap;
			width: 650rpx;
			background-color: #FFFFFF;
			margin-top: 5rpx;
			margin-bottom: 8rpx;
		}
		.classify_icon{
			display: flex;
			flex: 1;
			background-color: #FFFFFF;
			margin-left: 3rpx;
			margin-top: 5rpx;
			margin-bottom: 8rpx;
		}
		.segmented-wrap{
			width: 1300rpx;
		}
		.grid-item-box {
				text-align: center;
				justify-content: center;
				padding: 20rpx 0 0 0;
			}
			.grid-item-box image{
				margin: 0 auto;
			}
	.uni-search-box {
		background-color: #FFFFFF;
		height: 50px;
		width: 580rpx;
	}
		.classify_scroll_x{
			white-space: nowrap;
			width: 650rpx;
			background-color: #FFFFFF;
			margin-top: 5rpx;
			margin-bottom: 8rpx;
		}
		.scroll-view-item_H {
			display: inline-block;
			width: 140rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 12rpx;
		}
		.scroll-view-item_selected{
			border-bottom: 2px solid red;
		}
	.uni-margin-wrap{
		margin-top: 5rpx;
	}
	.swiper{
		height: 315rpx;
	}
	.banner-image {
		width: 750rpx;
		height: 315rpx;
	}
	
</style>